<template>
  <div>
    <h1>vue-router 的基本使用</h1>
    <!-- 声明路由链接 -->
    <router-link to="/home">首页</router-link>&nbsp;
    <router-link to="/movie/100">电影</router-link>&nbsp;
    <router-link to="/about">关于</router-link>&nbsp;

    <!-- 命名路由 -->
    <router-link :to="{ name:'movie',params:{mid:10086} }">go to movie</router-link>&nbsp;

    <!-- 命名路由编程式导航 -->
    <button @click="gotoMovie(1314)" class="btn btn-primary" >命名路由编程式导航</button>
    <hr />

    <!-- 声明路由占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'MyApp',
  methods:{
    gotoMovie(id){
      this.$router.push({ name:'movie',params:{ mid:id } })
    }
  }  
}
</script>

<style lang="less" scoped >
</style>